/*
  学习目标：生命周期
  三个阶段
  1. 挂载阶段
    1.1 constructor
      💥 声明state 创建ref ❌ 现在几乎不用,更推荐简写的写法
    1.2 render
    1.3  componentDidMount
      💥 1. 发请求  2. 最先能够获取DOM元素 3.开启定时器/监听window事件等
  2. 更新阶段
    2.1 render
    2.2 componentDidUpdate
      💥 1. 做缓存
  3. 卸载阶段
   3.1 componentWillUnMount
    💥 做清除的动作: 清除定时器/ 清除绑定的事件
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    isShow: true,
  };

  render() {
    const { isShow } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ isShow: !isShow })}>点我</button>
        {isShow && <Child></Child>}
      </div>
    );
  }
}

class Child extends React.Component {
  constructor() {
    super();
    console.log(' constructor ----->  ');
  }

  componentDidMount() {
    console.log(' componentDidMount ----->  ');
  }

  componentDidUpdate() {
    console.log('componentDidUpdate  ----->  ');
  }

  componentWillUnmount() {
    console.log(' componentWillUnmount ----->  ');
  }

  render() {
    console.log('render  ----->  ');
    const { msg } = this.state;
    return (
      <div>
        Child - <button onClick={() => this.setState({ msg: msg + 1 })}>点我</button>
      </div>
    );
  }

  state = {
    msg: 123,
  };
}
